<template>
	<view class="container">
		<view class="search-head">
			<view class="input">
				<text class="icon iconfont icon-search"></text>
				<input type="text" focus="true" v-model="keyword" placeholder="输入关健字" @confirm="doSearch" />
			</view>
			<view @click="goBack" class="cancel">取消</view>
		</view>
		
		<view class="search-box">
			<view class="head-box">
				<text class="title">历史搜索</text>
				<text @click="clearKeyword" class="icon iconfont icon-delete"></text>
			</view>
			<view class="list-box">
				<text v-for="(item,index) in keywords" :key="index" 
					@click="setKeyword(item.title)" class="text">{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchantId: 0,
				keyword: null,
				keywords: []
			}
		},
		methods: {
			//提交查询
			doSearch(){
				let _this = this;
				if(!_this.keyword || _this.keyword==''){
					return;
				}
				//获取本地缓存
				let list = _this.getKeyword();
				if(list){
					let item = list.find(val=>val.title==_this.keyword);
					//如果关健字不存在则存入
					if(!item){
						list.push({
							title: _this.keyword
						});
						uni.setStorageSync('qymall_client_keywords',list);
					}
				}else{
					list = [{
						title: _this.keyword
					}];
					uni.setStorageSync('qymall_client_keywords',list);
				}
				let sendUrl = `../goods/list?q=${encodeURIComponent(_this.keyword)}`;
				if(_this.merchantId>0) {
					sendUrl += `&mid=${_this.merchantId}`;
				}
				uni.navigateTo({
					url: sendUrl
				});
			},
			//赋值关健字
			setKeyword(txt){
				this.keyword = txt;
			},
			//清空关健字
			clearKeyword(){
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确认要清空搜索历史吗？',
					success: function (res) {
						if (res.confirm) {
							_this.keywords = [];
							uni.removeStorageSync('qymall_client_keywords');
						}
					}
				});
			},
			//获取关健字
			getKeyword(){
				return uni.getStorageSync("qymall_client_keywords");
			},
			//返回上一页
			goBack(){
				uni.navigateBack();
			},
			//页面初始化
			initData(){
				let keywords = this.getKeyword();
				if(keywords){
					this.keywords = keywords;
				}
			}
		},
		onLoad(options){
			if (!isNaN(options.mid)) {
				this.merchantId = parseInt(options.mid);
			}
			this.initData();
		}
	}
</script>

<style lang="scss">
	.search-head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 2rpx;
		padding: 24rpx;
		background: #fff;
		font-size: 28rpx;
		.input{
			flex-grow:1;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 5px 0;
			height: 22px;
			line-height: 22px;
			border-radius: 20px;
			color: #a2a2a2;
			font-size: 14px;
			background: rgba(243, 243, 243, 0.9);
			.icon{
				padding-left: 24rpx;
			}
			input{
				flex-grow:1;
				padding: 0 24rpx 0 12rpx;
				color: #333;
				font-size: 28rpx;
				line-height: 1;
			}
		}
		.cancel{
			margin-left: 24rpx;
			padding: 10rpx 0;
			color: #999;
			line-height: 1;
		}
	}
	.search-box{
		padding: 24rpx;
		.head-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			line-height: 64rpx;
			.title{
				color: #333;
				font-weight: bold;
				font-size: 28rpx;
			}
			.icon{
				padding: 0 24rpx;
				color: #999;
				font-size: 28rpx;
			}
		}
		.list-box{
			display: flex;
			justify-content: flex-start;
			flex-flow: row wrap;
			.text{
				margin-right: 24rpx;
				margin: 0 24rpx 24rpx 0;
				padding: 12rpx 24rpx;
				color: #999;
				font-size: 28rpx;
				line-height: 1;
				border-radius: 52rpx;
				background: #fff;
			}
		}
	}
</style>
